<template>
  <div class="login">
    <header>
      <span><van-icon name="arrow-left" /></span>
      <span>账号登录</span>
      <span></span>
    </header>
    <main>
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="username"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </main>
  </div>
</template>

<script>
import { Notify } from "vant";
export default {
  data() {
    return {
      username: "admin",
      password: "admin",
    };
  },
  methods: {
    getcityId() {
      this.$http
        .get("/area/info", {
          params: {
            name: "上海",
          },
        })
        .then((res) => {
          if (res.data.status === 200) {
            window.localStorage.setItem("cityId", res.data.body.value);
          }
        });
    },
    onSubmit(values) {
      this.$http.post("/user/login", values).then((res) => {
        if (res.data.status !== 200) {
          Notify({ type: "danger", message: res.data.description });
        }
        Notify({ type: "success", message: res.data.description });
        window.localStorage.setItem("token", res.data.body.token);
        window.localStorage.setItem("city", "上海");
        window.localStorage.setItem("community", "");
        this.$router.push("/home");
      });
    },
  },
  created() {
    this.getcityId();
  },
};
</script>

<style scoped>
.login {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.login header {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}
.login main {
  width: 100%;
  flex: 1;
}
</style>